<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Cross Tab Communication</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1 id="js-header"></h1>
    <script src="js/index.js"></script>

    <h2>
        This page shows the ways to share or sync messages between tabs which
        have the same origin.
    </h2>
    <main>
        <section id="broadcast-channel">
            <h2>Broadcast Channel</h2>
            <h3>&nbsp;</h3>
            <div>
                <input placeholder="Input Message" />
                <button type="button">Send</button>
            </div>
            <p></p>
        </section>
        <section id="service-worker">
            <h2>Service Worker</h2>
            <h3>&nbsp;</h3>
            <div>
                <input placeholder="Input Message" />
                <button type="button">Send</button>
            </div>
            <p></p>
        </section>
        <section id="local-storage">
            <h2>localStorage</h2>
            <h3>&nbsp;</h3>
            <div>
                <input placeholder="Input Message" />
                <button type="button">Send</button>
            </div>
            <p></p>
        </section>
        <section id="shared-worker">
            <h2>Shared Worker</h2>
            <h3>&nbsp;</h3>
            <div>
                <input placeholder="Input Message" />
                <button type="button">Send</button>
            </div>
            <p></p>
        </section>
        <section class="disabled" id="storage2">
            <h2>IndexedDB</h2>
            <h3>&nbsp;</h3>
            <div>
                <input placeholder="Input Message" disabled />
                <button type="button" disabled>Send</button>
            </div>
            <p></p>
        </section>
        <section id="post-message">
            <h2>open & opener</h2>
            <h3>&nbsp;</h3>
            <div>
                <input placeholder="Input Message" />
                <button type="button">Send</button>
            </div>
            <p></p>
        </section>
        <section class="disabled" id="websocket">
            <h2>Server Push</h2>
            <h3>WebSocket / Server-Sent Events / Long Polling</h3>
            <div>
                <input placeholder="Input Message" disabled />
                <button type="button" disabled>No Example</button>
            </div>
            <p></p>
        </section>
        <div class="link-box">
            <a class="link" id="js-link" href="javascript:void(0);"
                >Open a new tab (same origin)</a
            >
        </div>
    </main>

    <script src="js/broadcast.channel.js"></script>
    <script src="js/service.worker.js"></script>
    <script src="js/shared.worker.js"></script>
    <script src="js/local.storage.js"></script>
    <script src="js/indexed.db.mjs" type="module"></script>
    <script src="js/window.open.js"></script>
</body>
